<template>
  <div class="box">
    <div class="title">
      <span>系统通知</span>
      <!-- 右侧分页（Element Plus） -->
      <el-pagination
        v-show="total > 0"
        layout="  prev, pager, next"
        :page-sizes="pageSizes"
        :pager-count="5"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="message-list">
<div v-for="items in messages" :key="items.title" class="message-item" @click="openDialog(items)">
      <div style="display: flex; flex-direction: column">
        <div class="message-title">
          <span>{{ items.noticeTitle }}</span>
          <span class="time">
            <img :src="imgClock" alt="" style="height: 20px; width: 20px; margin-right: 4px" />
            {{ parseTime(items.createTime) }}
          </span>
        </div>
        <p class="notice-content">{{ stripHtml(items.noticeContent) }}</p>
        <span class="create-by">发布者：{{ items.createBy }}</span>
      </div>
    </div>
    </div>
    
    <!-- 弹窗：完整信息 -->
    <el-dialog v-model="dialogVisible" :title="activeMessage?.noticeTitle || '消息详情'" width="600px">
      <span class="time">
        {{ parseTime(activeMessage?.createTime) }}
      </span>
      <span class="create-by">发布者：{{ activeMessage?.createBy }}</span>

      <!-- 展示完整富文本 -->
      <div class="dialog-text" v-html="activeMessage?.noticeContent"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listNotice } from '@/api/system/notice'
import { parseTime } from '@/utils/ruoyi'
import { stripHtml } from '@/utils/html'

// 导入图片资源
import imgClock from '@/assets/logo/时钟.png'

const pageSize = ref(10)
const pageNum = ref(1)
const pageSizes = ref([5, 10, 20, 50])
const messages = ref([])
const total = ref(0)

// 弹窗状态
const dialogVisible = ref(false)
const activeMessage = ref(null)

const getMessages = () => {
  listNotice({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    noticeType: 1
  }).then((res) => {
    messages.value = res.data?.rows || []
    total.value = res.data?.total || 0
  })
}

function handleSizeChange(size) {
  pageSize.value = size
  pageNum.value = 1
  getMessages()
}

function handleCurrentChange(page) {
  pageNum.value = page
  getMessages()
}



// 点击打开弹窗
function openDialog(item) {
  activeMessage.value = item
  dialogVisible.value = true
}

onMounted(() => {
  getMessages()
})
</script>

<style lang="scss" scoped>
$padding: 12px;
$border-radius: 10px;
$border-bottom: 1px solid #e5e5e5;
$full-height: calc(100dvh - 84px);
.box {
  background-color: #ffff;
  border-radius: $border-radius;
  margin: 8px;
  height: calc(($full-height - 32px) * 0.4);
  display: flex;
  flex-direction: column;
  .title {
    display: flex; /* 标题与分页左右分布 */
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--el-color-primary);
    padding: $padding;
    border-bottom: $border-bottom;
    flex-shrink: 0;
  }
}
.message-item {
  height: auto;
  width: 100%;
  border-bottom: 0.5px solid #e0e0e0;
  padding: $padding;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;

  &:hover {
    background-color: #f8f9fa;
    transform: scale(1.02);
  }
}
.message-title {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.time {
  display: flex;
  align-items: center;
}
.create-by {
  font-size: 14px;
  font-weight: bold;
}
.notice-content {
  margin: 8px 0;
}
.message-list {
  height: 100%;
  overflow: auto;
}
.dialog-text {
  margin-top: 10px;
  line-height: 1.6;
  word-break: break-word;
}
</style>
